<%-- 
    Document   : etablissements
    Created on : 24 mai 2012, 08:05:27
    Author     : amine
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<%@taglib uri="/struts-tags" prefix="s"%>
<%@ taglib prefix="sec"
	uri="http://www.springframework.org/security/tags"%>

<link type="text/css" rel="stylesheet" href="./css/demo_page.css"
	media="screen" />
<link type="text/css" rel="stylesheet" href="./css/demo_table.css"
	media="screen" />
<script type="text/javascript" src="./js/jquery.dataTables.js"></script>
<script type="text/javascript"
	src="./js/jquery.dataTables.columnFilter.js"></script>

<script type="text/javascript">
	var oTable;
	$(function() {
		$('#delete').click(function() {
			DeleteEtablissement();
		});

		oTable = $('#tbl-etablissement').dataTable(
				{
					"aoColumns" : [ {
						sWidth : '3%'
					}, null, null, null, null, null, {
						sWidth : '2%'
					} ],
					"sPaginationType" : "full_numbers",
					"aaSorting" : [ [ 1, "asc" ] ],
					"bProcessing" : true,
					"bSearch" : false,
					"bPaginate" : true,
					"bJQueryUI" : false,
					"bFilter" : true,
					"bServerSide" : true,
					"sAjaxSource" : "etablissementPaginator.go",
					"fnServerData" : function(sUrl, aoData, fnCallback) {
						var data = "length="
								+ (fnGetKey(aoData, "iDisplayLength"))
								+ "&start="
								+ (fnGetKey(aoData, "iDisplayStart"))
								+ "&echo=" + (fnGetKey(aoData, "sEcho"))
								+ "&sort=" + (fnGetKey(aoData, "iSortCol_0"))
								+ "&sortdir="
								+ (fnGetKey(aoData, "sSortDir_0")) + "&strNomFr="
								+ (fnGetKey(aoData, "sSearch_1")) + "&strNomAr="
								+ (fnGetKey(aoData, "sSearch_2")) + "&strCommune="
								+ (fnGetKey(aoData, "sSearch_3")) + "&strTypeEtablissement="
		                                                + (fnGetKey(aoData, "sSearch_4"));

						$.ajax({
							"url" : sUrl,
							"data" : data,
							"success" : function(json) {
								fnCallback(json);
							},
							"dataType" : "json",
							"cache" : false
						});
					}
				}).columnFilter({
			sPlaceHolder : "head:before",
			aoColumns : [ null, {
				type : "text",
				id : 'txtNomFr'
			}, {
				type : "text",
				id : 'txtNomAr'
			}, {
				type : "text",
				id : 'txtCommune'
			}, {
				type : "text",
				id : 'txtTypeEtablissment'
			}, null ]
		});

//		$("#cmbTipoPrograma").children().remove().end().append(
//				'<option selected value=""></option>');
		
                $('#txtNomFr').css('width', '120px');
                $('#txtNomAr').css('width', '120px');
		$('#txtCommune').css('width', '120px');
		$('#txtTypeEtablissement').css('width', '120px');
                
		$("#dialog-confirm-delete").dialog({
			resizable : false,
			height : 180,
			modal : true,
			autoOpen : false,
			buttons : {
				"Yes" : function() {
					var values = $("input:checked").getCheckboxValues();
					var ids = "ids=";
					values.forEach(function(item) {
						ids = ids + item + ","
					});
					$.ajax({
						type : "POST",
						url : "deleteEtablissements.go",
						data : ids,
						success : function(result) {

							if (result.error != null && result.error != "") {
								$("#dialog-confirm-delete").dialog("close");
								$("#dialog-modal-error").html("");
								$("#dialog-modal-error").html(result.error);
								$("#dialog-modal-error").dialog("open");

							} else {

								oTable.fnDeleteRow(0);
								$("#dialog-confirm-delete").dialog("close");
							}

						}
					});
				},
				Cancel : function() {
					$(this).dialog("close");
				}
			}
		});
		$("#dialog-modal").dialog({
			height : 110,
			modal : true,
			autoOpen : false,
			resizable : false
		});
		$("#dialog-modal-error").dialog({
			height : 110,
			modal : true,
			autoOpen : false,
			resizable : false
		});

	});

	jQuery.fn.getCheckboxValues = function() {
		var values = [];
		var i = 0;
		this.each(function() {
			values[i++] = $(this).attr("name");
		});
		return values;
	}
	function DeleteEtablissement() {
		var arr = $("input:checked").getCheckboxValues();

		if (arr.length == 0) {
			$("#dialog-modal").dialog('open');
		} else {
			$("#dialog-confirm-delete").dialog('open');
		}
	}
	function fnGetKey(aoData, sKey) {
		for ( var i = 0, iLen = aoData.length; i < iLen; i++) {
			if (aoData[i].name == sKey) {
				return aoData[i].value;
			}
		}
		return null;
	}
</script>

<div class="breadcrumbs">
	<ul>
		<li class="home"><a href="#"></a></li>
		<li class="break">&#187;</li>
		<li><a href="#"><s:text name="title.etablissements" /> </a></li>


	</ul>
</div>
<div class="section">
	<div class="box">
		<div class="title">
			<h2>
				<s:text name="title.etablissements" />
			</h2>
			<span class="hide"></span>
		</div>
		<div class="content">
			<button type="button"
				onclick="window.location='addEtablissements.go'" class="grey">
				<span><s:text name='button.add' /> </span>
			</button>
			<button type="button" class="grey" onclick="DeleteEtablissement();">
				<span><s:text name='button.delete' /> </span>
			</button>
			<a href="printListEtablissement.go" target="_blank"> <img
				alt="Impression Liste des Etablissements PDF" src="./images/pdf.png">
			</a>

			<div class="container">
				<table cellspacing="0" cellpadding="0" border="0" class="display"
					id="tbl-etablissement">
					<thead>
						<tr>
							<th></th>
							<th></th>
							<th></th>
							<th></th>
							<th></th>
							<th></th>

						</tr>
						<tr>
							<th><input type="checkbox" name="check" class="checkall" />
							</th>
							<th><s:text name='grid.etablissement.nom.fr' /></th>
							<th><s:text name='grid.etablissement.nom.ar' /></th>
                                                        <th><s:text name='grid.etablissement.commune' /></th>
                                                        <th><s:text name='grid.etablissement.type.etablissement' /></th>
							<th></th>
						</tr>
					</thead>
					<tbody>

					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
<div id="dialog-confirm-delete" title="">
	<p>
		<span class="ui-icon ui-icon-alert"
			style="float: left; margin: 0 7px 20px 0;"></span>
		<s:text name="confirm.delete" />
	</p>
</div>
<div id="dialog-modal" title="">
	<p>
		<s:text name="confirm.select.delete" />
	</p>
</div>
<div id="dialog-modal-error" title=""></div>

